<template>
  <list class="address">
    <cell class="address_cell address_name">
      <text class="address_cell_text">收货人：</text>
      <input class="input address_name_ipt" type="text" name="" value="" placeholder="请输入姓名" :autofocus=true @input="oninput">
    </cell>
    <cell class="address_cell address_site" @click="address">
      <text class="address_cell_text">收货地址：</text>
      <div class="address_site_div">
        <input class="input address_site_ipt" type="text" name="" placeholder="-请选择-" :value="province">
        <input class="input address_site_ipt" type="text" name="" placeholder="" :value="city">
        <input class="input address_site_ipt" type="text" name="" placeholder="" :value="area">
      </div>
    </cell>
    <cell class="address_cell address_location">
      <text class="address_cell_text">详细地址：</text>
      <input class="input address_location_ipt" type="text" name="" placeholder="请输入详细地址" value="" @input="oninput">
    </cell>
    <cell class="address_cell address_phone">
      <text class="address_cell_text">收货手机：</text>
      <input class="input address_phone_ipt" type="tel" name="" placeholder="请输入手机号" value="" maxlength="11" @input="oninput2">
    </cell>
    <cell class="address_remind">
      <text class="address_remind_info">注：你订购的礼品卡，将在你付款后24小时内快递发货，请注意查收</text>
      <text class="address_remind_tel">咨询热线：138 1818 3080&nbsp;&nbsp;&nbsp;136 9192 2413</text>      
    </cell>
    <cell>
      <button class="address_btn">
        <text class="address_btn_text">确认</text>
      </button>      
    </cell>
  </list>
</template>
<style scoped>
  .address{width: 750px;}
  .address_cell{flex-direction: row;justify-content: flex-start;align-items: center;border-bottom-width:1px;border-bottom-style: solid;border-bottom-color: #9E9F9F;width: 750px;padding: 35px 50px;}
  .address_cell_text{color: #231815;font-size: 40px;}
  .address_name{}
  .address_site{}
  .address_location{}
  .address_phone{}

  .input{width: 450px;height: 52px;border-width:0px;border-style: solid;border-color: red;color: #727171;}
  .address_name_ipt{font-size: 35px;}
  .address_site_ipt{font-size: 35px;width: 150px;}
  .address_location_ipt{font-size: 35px;}
  .address_phone_ipt{font-size: 35px;}
  .address_site_div{flex-direction: row;justify-content: center;align-items: center;}

  .address_remind{padding: 35px 50px;}
  .address_remind_info{color: #727171;line-height: 60px;}
  .address_remind_tel{color: #727171;line-height: 60px;}
  .address_btn{justify-content: center;align-items: center;width: 600px;height: 72px;background-color: #DC7009;margin:0 75px;border-radius: 10px;}
  .address_btn_text{color: #fff;}

  .address_btn{background-color: #E60012;width: 450px;height: 72px;margin: 0 150px;}
  .address_btn_text{color: #fff;}
</style>
<script>
  var address = weex.requireModule("address");
  module.exports = {
    data: function () {
      return {
        txtInput: '',
        txtInput2: '',
        txtChange: '',
        txtReturnType: '',
        txtSelection:'',
        autofocus: false,
        province:'',
        city:'',
        area:'',
      };
    },
    methods: {
      address:function(e){
        var that = this;
        address.show(function(e){
          that.province = e.province,
          that.city = e.city,
          that.area = e.area
        })

      },
      
      oninput: function (event) {
        this.txtInput = event.value;
        console.log('oninput', event.value);
      },
      oninput2: function (event) {
        this.txtInput2 = event.value;
        console.log('oninput', event.value);
      },
      
    }
  };
</script>